<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>findClosestAnchor</title>
</head>

<body>
    <a href="http://www.eveningwater.com" target="_blank" rel="noopener noreferrer">
        <span>夕水的个人网页</span>
    </a>
    <div id="result"></div>
    <button type="button" id="findBtn">点击我查找最近的链接元素</button>
    <script>
        const findClosestAnchor = node => {
            for (let n = node; n.parentNode; n = n.parentNode) {
                if (n.nodeName.toLowerCase() === 'a') {
                    return n;
                }
            }
            return null;
        };
        document.getElementById('findBtn').onclick = () => {
            const node = findClosestAnchor(document.querySelector('a > span'));
            console.log(node);
            document.getElementById('result').innerHTML = `最近的链接元素是:${node.href}}`
        }
    </script>
</body>

</html>